﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        var d = new Date()
        
        parent.fly.setup(this);

    </script>
    <!--<script src="../../fly-comment.js" type="text/javascript"></script>
    <script src="../../fly.ui.js" type="text/javascript"></script>
    <script src="../../plugins/grid/grid.js" type="text/javascript"></script>-->
    <script type="text/javascript">

        alert(new Date() - d)
    </script>
    <link href="../../plugins/themes/blue/fly-base.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/gray/grid.css" rel="stylesheet" type="text/css" />
    <script>

        $(function () {

            var rows = []
            while (rows.length < 15) {
                rows.push({ id: rows.length, f1: "abcdefghijk", f2: Math.random(), f3: Math.random(), f4: Math.random() + " - " + Math.random(), f5: Math.random(), f6: Math.random(), f7: Math.random() })
            }

            rows[0].children = [rows.pop(), rows.pop(), rows.pop(), rows.pop(), rows.pop()]

            rows[3].children = [rows.pop(), rows.pop()]

            rows[3].children[1].children = [rows.pop(), rows.pop()]

            var store = new $.data.Store(
            {
                proxy: new $.data.MemoryProxy(
            	{
            	    data: {
            	        Total: 2,
            	        Rows: rows
            	    }
            	}),
                reader: new $.data.JsonReader(
            	{
            	    root: 'Rows',
            	    totalProperty: 'Total',
            	    id: 'id'
            	}, [{
            	    name: "name",
            	    mapping: "f1",
            	    type: "string",
            	    format: "{0}123"
            	}, "f2", "f3", "f4", "f5", "f6", "f7"]),
                remoteSort: true,
                baseParams:
            	{
            	    classname: 'ClassInfoAjax',
            	    methodname: 'GetList',
            	    start: 0,
            	    limit: 5
            	}
            });

            var rs = store.load()

            var panel = new $.ui.grid.GridPanel({
                id: 'panel',
                store: store,
                width: 800,
                height: 400,
                rowHeight: 50,
                plugins: new $.ui.grid.TreeGridPlugin({
                    parentCascade: true,
                    childCascade: true
                }),
                columns: [
                new $.ui.grid.RowNumberer({
                    format: "{0}.",
                    width: 150
                }),
                new $.ui.grid.CheckboxSelectionModel(),
                {
                    dataIndex: "id",
                    width: 40,
                    css: 'blue',
                    headerCss: 'red',
                    headerStyle: "font-size:20px"
                },
                {
                    dataIndex: "name",
                    style: "color:red"
                }, "f2", "f3", "f4"
                ]
            })

            panel.render(document.body)



        })
    </script>
    <style>
        body
        {
            height: 1000px;
            font-size: 12px;
            font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
        }
        
        .blue
        {
            color: blue;
        }
        
        .red
        {
            color: Red;
        }
    </style>
</head>
<body>
    <a href=grid-gray-noscript2.htm target=_blank >grid-gray-noscript2.htm</a>
    <iframe height="500" width="1000" src="grid-gray-noscript2.htm"></iframe>
</body>
</html>
